<template>
  <div class="body">
    <catshit-header active-index="4"></catshit-header>
    <div class="main" v-if="show">
      <div class="up">
        <img width="20%" height="30%" src="../../assets/images/rei.jpg">
        <h1 style="margin-left: 100px">欢迎你，{{userInfo.user_name}}</h1>
      </div>
      <div class="bottom">
        <el-tabs v-model="tag" type="card">
          <el-tab-pane label="个人信息" name="1">
            <el-card style="padding: 50px">
              <h4>username:        {{userInfo.user_name}}</h4>
              <el-divider></el-divider>
              <h4>E-mail:           {{userInfo.user_email}}</h4>
              <el-divider></el-divider>
              <h4>wallet:           {{userInfo.user_wallet}}</h4>
              <el-divider></el-divider>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="购买记录" name="2">
            <el-card>
              <el-table
                :data="myMovie"
                stripe>
                <el-table-column prop="spotid" label="景点编号"></el-table-column>
                <el-table-column prop="spotname" label="景点名称"></el-table-column>
                <el-table-column prop="dealdate" label="成交时间"></el-table-column>
                <el-table-column prop="tourdate" label="旅游时间"></el-table-column>
                <el-table-column prop="price" label="价格"></el-table-column>
                <el-table-column  label="操作">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row.ticid)" type="text" size="small">退票</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>

    </div>
  </div>
</template>

<script>
    import CatshitHeader from "../../components/CatshitHeader";
    import Cookies from 'js-cookie'
    export default {
        name: "index",
      components: {CatshitHeader},
      data(){
          return{
            /*账号信息*/
            userInfo:Cookies.get('userInfo'),
            /*购买记录*/
            myMovie:[],
            tag:'1',
            show:false,
            user_id:Cookies.get('user_id')
          }
      },
      created() {
        this.tag=this.$route.query.tag;
      },
      mounted() {
          this.getInfo();
          this.userInfo=JSON.parse(this.userInfo)
          this.show=true
      },
      methods:{
          getInfo(){
            this.$axios.post('/getorder',{userid:this.user_id}).then((res)=>{
              if(res.data.code){
                this.$message.error('出错了')
                return
              }
              this.myMovie=res.data.msg
            })
          },
        handleClick(id){
          this.$axios.post('withdraw',{ticid:id}).then(res=>{
            if(res.data.code){
              this.$message.error(res.data.msg)
              return
            }
            this.$message.info('退票成功')
            this.getInfo()
          })

        },
      }
    }
</script>

<style scoped>
  .body{
    display: flex;
    background-color: aliceblue;
    justify-content: center;
  }
  .main{
    margin-top: 60px;
    width: 70%;
    background-color: white;
  }
  .up{
    padding: 50px;
    display: flex;
    align-items: center;
  }
</style>
